<script setup>
  import { storeToRefs } from 'pinia'
  import { reactive, ref, computed } from 'vue'
  import { useCustomerConfigStore } from '@/stores/customer'

  const props = defineProps({
    test: { type: String },
  })
  const emit = defineEmits(['change:test'])
  const a = ref(props.test)
  console.log(a)
  const change = () => (a.value = a.value == 'toto' ? 'titi' : 'toto')

  const toto = computed(() => `a's value is ${a.value}`)

  const b = reactive({ test: props.test })
  console.log(b)
  const changeReactive = () => (b.test = b.test == 'toto' ? 'titi' : 'toto')

  const formConfigStore = useCustomerConfigStore()
  const { options } = storeToRefs(formConfigStore)
  console.log(options)

  const c = computed(() => `props test value is ${props.test}`)
  const changeEmit = () => emit('change:test')
</script>
<template>
  <div>
    <button @click="change">Test prop ref</button>
    <div>This is a ref build from a prop value : {{ a }}</div>

    <div>Computed value based on the ref here above : {{ toto }}</div>

    <button @click="changeReactive">Test reactive</button>
    <div>This is a reactive var build from a prop value : {{ b }}</div>

    <button @click="changeReactiveFromStore">Test reactive</button>
    <div>This is a reactive var build from a prop value : {{ b }}</div>

    <button @click="changeEmit">Test emit and cascade back</button>
    <div>This is a computed based on a prop value : {{ c }}</div>
  </div>
</template>
